<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" left-icon="left" title="管理提现卡" @clickLeft="back"></uni-nav-bar>
	<view class="container p30">
			<view class="bg-white is-flex bor_r20 box-shadow-grey8 mb30 p2030" v-if="List.length>0" v-for="item in List" @tap="navgetTo('pages/my/edit_withdrawal_card',item)">
				<view class="uni-flex wd100 ac">
					<view class="flex1">
						<view class="mb20">{{item.bankName}}</view>
						<view class="mb20">{{item.showBankCardNum}}</view>
						<view class="mb20"><text class="mr30">{{item.bankUserName}}</text><text>{{item.showBankMobile}}</text></view>
						<view class="mb20">{{item.showUserIdCard}}</view>
					</view>
					<uni-icons type="compose" size="30"></uni-icons>
				</view>
			</view>
			<!-- <view class="bg-white is-flex bor_r20 box-shadow-grey8 mb30 p2030">
				<view class="uni-flex wd100 ac">
					<view class="flex1">
						<view class="mb20">建设银行</view>
						<view class="mb20">6228**********8975</view>
						<view class="mb20"><text class="mr30">张三</text><text>131*****8565</text></view>
						<view class="mb20">5303**********4567</view>
					</view>
					<uni-icons type="compose" size="30"></uni-icons>
				</view>
			</view>
			<view class="bg-white is-flex bor_r20 box-shadow-grey8 mb30 p2030">
				<view class="uni-flex wd100 ac">
					<view class="flex1">
						<view class="mb20">建设银行</view>
						<view class="mb20">6228**********8975</view>
						<view class="mb20"><text class="mr30">张三</text><text>131*****8565</text></view>
						<view class="mb20">5303**********4567</view>
					</view>
					<uni-icons type="compose" size="30"></uni-icons>
				</view>
			</view> -->
			<view class="mt60 tc">
				<text class="color-blue" @tap="navgetTo('pages/my/create_withdrawal_card','','')">新增提现卡>></text>
			</view>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	export default {
		data() {
			return {
				List:[],
			}
		},
		computed: {

		},
		watch: {},
		onLoad(option) {
			this.getPageList();
		},
		onShow() {
		},
		methods: {
			back(){
				uni.navigateTo({
					url:'/pages/my/wallet_withdrawal',
					success() {
						var page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				})
			},
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			// 获取分页列表
			getPageList() {
				let _this = this;
				api.bankList().then(res => {
					if (res.code === 0) {
						if (res.data.length > 0) {
							_this.List = res.data;
							_this.List.forEach((item,index) =>{
								item.showBankCardNum = item.bankCardNum.replace(/(\d{4})\d{8}(\d{4})/, "$1****$2");
								item.showUserIdCard = item.userIdCard.replace(/(\d{4})\d{10}(\d{4})/, "$1****$2");
								item.showBankMobile = item.bankMobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
							});
						}else{
							_this.List = [];
						}
					} else {}
				_this.isRefreshing = false;
				_this.loadMoreText = "";
				}).catch(function(){
					_this.isRefreshing = false;
					_this.loadMoreText = "";
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8f8;
	}
	.container{
		background-color: #f8f8f8;
		height: 100vh;
	}
	.container {
		font-size: 14px;
		line-height: 24px;
	}
	
	.uni-flex.ac{
		align-items: center;
	}

	.index-swiper {
		width: 100%;
		height: 670rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.bottom-wrap {
		position: relative;
		top: -60rpx;
	}

	.wd100 {
		width: 100%;
	}

	.wd55 {
		width: 55%;
	}

	.wd70 {
		width: 70%;
	}

	.flexauto {
		flex: 0 0 auto;
	}

	.schduleForm {
		.is-bt {
			position: relative;
			margin-right: 15px;
		}

		.is-bt::after {
			content: "*";
			position: absolute;
			right: 0;
			color: $uni-text-color-red;
		}
	}

	.is-flex {
		display: flex;
		align-items: center;
	}

	.xf-wrap {
		position: relative;
		top: -60rpx;
		overflow: hidden;
	}

	.box-shadow {
		box-shadow: 2rpx 2px 2rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.xc-desc {
		text {
			margin-bottom: 30rpx;
			display: block;
		}
	}

	.pb130 {
		padding-bottom: calc(130rpx + max(env(safe-area-inset-bottom),20px));
	}

	.share-reward {
		.color-black {
			display: block;
			margin-bottom: 20rpx;
		}

		.is-flex {
			align-items: flex-start;
		}

		.color-gray {
			line-height: 1.8;
			text-align: justify;
			margin-left: 20rpx;
		}
	}

	.fixed-bottom-wrap {
		position: fixed;
		z-index: 111;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		width: 100%;
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
	}

	.schdule-card {
		height: calc(60rpx + max(env(safe-area-inset-bottom),20px));
		line-height: 60rpx;
		border-top: 1px solid #f8f8f8;
		padding-bottom: max(env(safe-area-inset-bottom),20px);

		.flex-item {
			padding-top: 10rpx;
			width: 25%;
			text-align: center;
			line-height: 40rpx;
		}

		.flex-item:last-child {
			width: 100%;
			padding-top: 0;
		}

		text {
			display: block;
		}

		.sign {
			height: 100%;
			color: $uni-text-color-white;
			background-color: $uni-text-color-green;
			font-size: 32rpx;
			line-height: 100%;

			text {
				line-height: 100rpx;
			}
		}
	}
</style>